<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线考试</title>
    <base target="_blank">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header class="title">
            <div class="c900 flex">
                <el-link :underline="false" href="index.html">
                    <h1>在线考试</h1>
                </el-link>
                <time>时间: 43:36</time>
                <div class="flex">
                    <el-avatar src="https://img1.baidu.com/it/u=681713666,1923984648&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"></el-avatar>
                    <div>
                        <el-link href="paper.html">添加考卷</el-link>
                        <el-link href="register.html">注册</el-link>
                        <el-link href="login.html">登录</el-link>
                    </div>
                </div>
            </div>
        </el-header>
        <el-main>
            <div class="c900 h100 flex" style="flex-direction: column; background-color: #fff">
                <el-form :inline="true" style="width: 100%">
                    <el-form-item label="课程">
                        <el-select placeholder="课程" v-model="questionWhere.course">
                            <el-option label="Java" value="Java"></el-option>
                            <el-option label="Html" value="Html"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="题目">
                        <el-input placeholder="题目" v-model="questionWhere.content"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="query()">查询</el-button>
                        <el-button type="primary" @click="showEditor=true">添加</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="questionPage.records" style="width: 100%; flex-grow: 1;overflow: auto">
                    <el-table-column prop="content" label="题目" width="180"></el-table-column>
                    <el-table-column prop="course" label="课程" width="180"></el-table-column>
                    <el-table-column prop="type" label="题型" width="180"></el-table-column>
                    <el-table-column prop="items" label="答案" width="180"></el-table-column>
                    <el-table-column prop="items" label="选项"></el-table-column>
                    <el-table-column prop="" label="修改" width="180">
                        <template slot-scope="scope">
                            <el-button @click="showEditor=true,mod(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="text-align: right; width: 100%;margin-bottom: 10px"
                               background
                               layout="prev, pager, next"
                               @current-change="change"
                               :total="questionPage.total">
                </el-pagination>
            </div>
        </el-main>
        <el-footer class="flex title" style="justify-content: center;height: 30px">
            <a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
        </el-footer>
    </el-container>
    <el-dialog title="题目信息" :visible.sync="showEditor">
        <el-form>
            <el-form-item label="题型" :label-width="100">
                <el-select v-model="question.type" placeholder="请选择题型">
                    <el-option label="填空题" value="填空题"></el-option>
                    <el-option label="单选题" value="单选题"></el-option>
                    <el-option label="多选题" value="多选题"></el-option>
                    <el-option label="判断题" value="判断题"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="课程" :label-width="100">
                <el-select v-model="question.course" placeholder="请选择课程">
                    <el-option label="Java" value="Java"></el-option>
                    <el-option label="Oracle" value="Oracle"></el-option>
                    <el-option label="HTML" value="HTML"></el-option>
                    <el-option label="CSS" value="CSS"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="题目" :label-width="100">
                <el-input v-model="question.content" autocomplete="off" type="textarea" style="width: 90%"></el-input>
            </el-form-item>
            <el-form-item label="选项" :label-width="100">
                <el-input v-if="question.type=='填空题'" v-model="question.items" autocomplete="off" type="textarea" style="width: 90%"></el-input>
                <el-switch v-if="question.type=='判断题'" v-model="question.items" active-color="#13ce66" inactive-color="#999"></el-switch>
                <div v-if="question.type.includes('选题')" class="grid3" style="grid-template-columns: auto 20px 50px">
                    <el-input v-model="question.item1" autocomplete="off" style="width: 90%">
                        <span slot="append">
                            <el-button icon="el-icon-plus"></el-button>
                            <el-button icon="el-icon-minus"></el-button>
                        </span>
                    </el-input>A
                    <el-switch v-model="question.select1" active-color="#13ce66" inactive-color="#999"></el-switch>
                    <el-input v-model="question.item2" autocomplete="off" style="width: 90%">
                        <span slot="append">
                            <el-button icon="el-icon-plus"></el-button>
                            <el-button icon="el-icon-minus"></el-button>
                        </span>
                    </el-input>B
                    <el-switch v-model="question.select2" active-color="#13ce66" inactive-color="#999"></el-switch>
                    <el-input v-model="question.item3" autocomplete="off" style="width: 90%">
                        <span slot="append">
                            <el-button icon="el-icon-plus"></el-button>
                            <el-button icon="el-icon-minus"></el-button>
                        </span>
                    </el-input>C
                    <el-switch v-model="question.select3" active-color="#13ce66" inactive-color="#999"></el-switch>
                    <el-input v-model="question.item4" autocomplete="off" style="width: 90%">
                        <span slot="append">
                            <el-button icon="el-icon-plus"></el-button>
                            <el-button icon="el-icon-minus"></el-button>
                        </span>
                    </el-input>D
                    <el-switch v-model="question.select4" active-color="#13ce66" inactive-color="#999"></el-switch>
                </div>

            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showEditor = false">取 消</el-button>
            <el-button type="primary" @click="question.id == 0 ? add():update()">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            showEditor:false,
            questionWhere: {course:"", content:""},
            questionPage: {current:1, size:10,total:0, records:[]},
            question: {
                id:0,content:"",course:"",type:"",items:"",item1:"",item2:"",item3:"",
                item4:"",select1:0,select2:0,select3:0,select4:0
            }
        },
        methods:{
            query(){
                axios.get("question/query",{
                    params:{
                        page: this.questionPage.current,
                        size: this.questionPage.size,
                        content: this.questionWhere.content,
                        course: this.questionWhere.course,
                    }
                }).then(res=>{
                    if(this.questionPage.current == 1){
                        this.questionPage = res.data;
                    } else {
                        this.questionPage = res.data;
                        this.questionPage.records = this.questionPage.records;
                        console.log(this.questionPage)
                    }
                })
            },
            change(page){
                this.questionPage.current = page;
                this.query();
            },
            del(itme){
                axios.post("question/delete",itme).then(res=>{
                    if(this.questionPage.current == 1){
                        this.$message(res.data.message);
                        // this.questionPage.records = this.questionPage.records.filter(i=> i.id!=itme.id);
                        this.query();
                    }
                })
            },
            add(){
                if(this.question.type.includes("选题")){
                    let i = 0;
                    if(this.question.select1){
                        this.question.item1 = "$" + this.question.item1 ;
                        i++;
                    }
                    if(this.question.select2){
                        this.question.item2 = "$" + this.question.item2 ;
                        i++;
                    }
                    if(this.question.select3){
                        this.question.item3 = "$" + this.question.item3 ;
                        i++;
                    }
                    if(this.question.select4){
                        this.question.item4 = "$" + this.question.item4 ;
                        i++;
                    }

                    if(this.question.type == "单选题" && (i > 1 || i < 1)){
                        this.$alert("单选题只能选择一个正确答案");
                        this.question.select1 = false;
                        this.question.select2 = false;
                        this.question.select3 = false;
                        this.question.select4 = false;
                        if(this.question.item1.startsWith("$")){
                            this.question.item1 = this.question.item1.substring(1) ;
                        }
                        if(this.question.item2.startsWith("$")){
                            this.question.item2 = this.question.item2.substring(1) ;
                        }
                        if(this.question.item3.startsWith("$")){
                            this.question.item3 = this.question.item3.substring(1) ;
                        }
                        if(this.question.item4.startsWith("$")){
                            this.question.item4 = this.question.item4.substring(1) ;
                        }
                        return;
                    }else if(this.question.type == "多选题" && i<2){
                        this.$alert("多选题至少选择两个正确答案");
                        this.question.select1 = false;
                        this.question.select2 = false;
                        this.question.select3 = false;
                        this.question.select4 = false;
                        if(this.question.item1.startsWith("$")){
                            this.question.item1 = this.question.item1.substring(1) ;
                        }
                        if(this.question.item2.startsWith("$")){
                            this.question.item2 = this.question.item2.substring(1) ;
                        }
                        if(this.question.item3.startsWith("$")){
                            this.question.item3 = this.question.item3.substring(1) ;
                        }
                        if(this.question.item4.startsWith("$")){
                            this.question.item4 = this.question.item4.substring(1) ;
                        }
                        return;
                    }

                    this.question.items = this.question.item1 +";"+
                        this.question.item2 +";"+
                        this.question.item3 +";"+
                        this.question.item4;
                }
                console.log(this.question);
                axios.post("question/add",
                    {
                        content:this.question.content,
                        course:this.question.course,
                        type:this.question.type,
                        items:this.question.items
                    }
                ).then(res=>{
                    if(this.questionPage.current == 1){
                        this.$message(res.data.message);
                        this.query();
                        this.question = {
                            id:0,content:"",course:"",type:"",items:"",item1:"",item2:"",item3:"",
                            item4:"",select1:0,select2:0,select3:0,select4:0};
                        this.showEditor = false;
                    }else {
                        this.$alert(res.data.message);
                    }
                })
            },
            mod(item){
                this.question.id = item.id;
                this.question.type = item.type;
                this.question.content = item.content;
                this.question.course = item.course;
                if(item.type.includes("选题")){
                    let is = item.items.split(";");
                    this.question.item1 = is[0];
                    this.question.item2 = is[1];
                    this.question.item3 = is[2];
                    this.question.item4 = is[3];
                    this.question.select1 = false;
                    this.question.select2 = false;
                    this.question.select3 = false;
                    this.question.select4 = false;
                    if(this.question.item1.startsWith("$")){
                        this.question.item1 = this.question.item1.substring(1) ;
                        this.question.select1 = true;
                    }
                    if(this.question.item2.startsWith("$")){
                        this.question.item2 = this.question.item2.substring(1) ;
                        this.question.select2 = true;
                    }
                    if(this.question.item3.startsWith("$")){
                        this.question.item3 = this.question.item3.substring(1) ;
                        this.question.select3 = true;
                    }
                    if(this.question.item4.startsWith("$")){
                        this.question.item4 = this.question.item4.substring(1) ;
                        this.question.select4 = true;
                    }
                }else if(item.type=="填空题"){
                    this.question.items = item.items;
                }else if(item.type=="判断题"){
                    this.question.items = item.items == "true";
                }
            },
            update(){
                if(this.question.type.includes("选题")){
                    let i = 0;
                    if(this.question.select1){
                        this.question.item1 = "$" + this.question.item1 ;
                        i++;
                    }
                    if(this.question.select2){
                        this.question.item2 = "$" + this.question.item2 ;
                        i++;
                    }
                    if(this.question.select3){
                        this.question.item3 = "$" + this.question.item3 ;
                        i++;
                    }
                    if(this.question.select4){
                        this.question.item4 = "$" + this.question.item4 ;
                        i++;
                    }

                    if(this.question.type == "单选题" && (i > 1 || i < 1)){
                        this.$alert("单选题只能选择一个正确答案");
                        this.question.select1 = false;
                        this.question.select2 = false;
                        this.question.select3 = false;
                        this.question.select4 = false;
                        if(this.question.item1.startsWith("$")){
                            this.question.item1 = this.question.item1.substring(1) ;
                        }
                        if(this.question.item2.startsWith("$")){
                            this.question.item2 = this.question.item2.substring(1) ;
                        }
                        if(this.question.item3.startsWith("$")){
                            this.question.item3 = this.question.item3.substring(1) ;
                        }
                        if(this.question.item4.startsWith("$")){
                            this.question.item4 = this.question.item4.substring(1) ;
                        }
                        return;
                    }else if(this.question.type == "多选题" && i<2){
                        this.$alert("多选题至少选择两个正确答案");
                        this.question.select1 = false;
                        this.question.select2 = false;
                        this.question.select3 = false;
                        this.question.select4 = false;
                        if(this.question.item1.startsWith("$")){
                            this.question.item1 = this.question.item1.substring(1) ;
                        }
                        if(this.question.item2.startsWith("$")){
                            this.question.item2 = this.question.item2.substring(1) ;
                        }
                        if(this.question.item3.startsWith("$")){
                            this.question.item3 = this.question.item3.substring(1) ;
                        }
                        if(this.question.item4.startsWith("$")){
                            this.question.item4 = this.question.item4.substring(1) ;
                        }
                        return;
                    }

                    this.question.items = this.question.item1 +";"+
                        this.question.item2 +";"+
                        this.question.item3 +";"+
                        this.question.item4;
                }
                console.log(this.question);
                axios.post("question/update",
                    {
                        id:this.question.id,
                        content:this.question.content,
                        course:this.question.course,
                        type:this.question.type,
                        items:this.question.items
                    }
                ).then(res=>{
                    if(this.questionPage.current == 1){
                        this.$message(res.data.message);
                        this.query();
                        this.question = {
                            id:0,content:"",course:"",type:"",items:"",item1:"",item2:"",item3:"",
                            item4:"",select1:0,select2:0,select3:0,select4:0};
                        this.showEditor = false;
                    }else {
                        this.$alert(res.data.message);
                    }
                })
            }
        },
        created(){
            this. query();
        }
    })
</script>
<style>
    html,body{
        margin: 0px;
        padding: 0px;
    }
    #app>.el-container>.el-main{
        overflow: hidden;
        background-image: url("https://img0.baidu.com/it/u=668574498,1720392676&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=295");
        background-size: cover;
    }
    .el-main{
        padding: 0px 10px;
    }
    .el-card{
        margin-top: 10px;
    }
    html,body,#app,#app>.el-container{
        height: 100%;
    }
    *{
        transition: all .5s;
    }
    a{
        text-decoration: none;
    }
    .c900{
        width: 1000px;
        margin: auto;
    }
    .title{
        background-color: #0a699999;
        color: #fff;
    }
    .title *{
        color: #fff;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        display: flex;
        height: 100%;
    }
    nav .el-link{
        padding-inline: 20px;
        font-size: 1em;
    }
    nav .el-link:hover{
        background-color: #99f7;
    }
    img{
        width: 40px;
        height: 40px;
        object-fit: cover;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
    .grid2,.grid3,.grid4{
        gap: 10px;
    }
    .grid2{
        display: grid;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .h100{
        height: 100%;
    }
    small{
        font-size: .7em;
        color: #989
    }
    li>ol{
        margin-bottom: 20px;
    }
    li{
        margin-block: 10px;
    }
    .fill{
        border: 0px;
        border-bottom: 1px #000 solid;
        margin-inline: 3px;
        padding: 5px;
        text-align: center;
        color: #0a6999;
    }
    .el-form-item{
        margin-block: 10px 0px;
        padding-inline: 10px;
    }
    .el-switch{
        align-self: center
    }
</style>

</html>